<template>
  <div style="float: left;margin-top: 5px">
    <el-form ref="userSearchRef" :model="searchFormData">
      <el-form-item label="关键词" >
        <el-input  type="text" v-model="searchFormData.userName"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div style="height: 40px;margin-top: 5px;float: left;margin-left: 20px;">
    <el-button  @click="searchDicClick">查询</el-button>
    <el-button @click="resetSearchClick">重置</el-button>
    <el-button v-check-permission="'system:log:export'" @click="exportClick">导出</el-button>
  </div>
  <div style="clear: both"></div>
  <div style="height: calc(100% - 60px);">
    <Table  :show-page="true" ref="tableRef" :show-line-number="true"
            :showCheckBox="false" :url="operationUrl" :columns="columns">
    </Table>
  </div>
</template>

<style scoped>

</style>

<script   setup  >

import Table from "@/components/plugs/table/Table.vue";
import {inject, reactive, ref, toRaw} from "vue";
import {AXIOS_NAME,TOKEN_NAME_KEY,TOKEN_VALUE_KEY} from '@/constant/constant.js';

const $axios = inject(AXIOS_NAME);
const tableRef = ref(null);
const operationUrl = ref("/operationLog/getOperationLogList")
const searchFormData = reactive({
  'userName': ''
})
const columns = [
  {field:"userName","desc": "名称"},
  {field:"roleName","desc": "角色名称"},
  {field:"ip","desc": "ip地址"},
  {field:"operationType","desc": "操作类型"},
  {field:"tableName","desc": "操作表"},
  {field:"operationContent","desc": "操作内容"},
  {field:"operationResult","desc": "操作结果",dicType:"operation_result"},
  {field:"startTime","desc": "开始时间"},
  {field:"endTime","desc": "结束时间"},
  {field:"proceedTime","desc": "耗时"},
  {field:"assistContents","desc": "辅助信息"},
  {field:"logType","desc": "日志类型",dicType: "log_type"},
  {field:"showTime","desc": "创建时间"}
];
const searchDicClick = () => {
  tableRef.value.reload(toRaw(searchFormData));
}

const resetSearchClick = () => {
  searchFormData.userName = '';
}

const exportClick = () =>{
  window.open(import.meta.env.VITE_HTTP_BASE_URL  + "operationLog/exportExcelDatas");
}
</script>
